<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		 *{margin:0px;padding:0px;}
		 .main{
		       width:1600px;
		       height:628px;
		       background-color:pink;
		       margin:0 auto;
		       border:1px red solid;
		  }
		 .main a{
		 	text-decoration:none;
		 }
		 .box1{
		 	width:375px;
		    height:628px;
		    background-color:blue;
		    float:left; 
		  }
		   .box2{
		   	width:1224px;
		       height:628px;
		       background-color:#fefefe;
		       float:left;}
		   .bo1{
		   	   width:450px;
		       height:596px;
		       background-color:#ffffff;
		       margin-left:388px;		       
		       margin-top:31px;
		      position: relative;
		       }
		       .bo1 h2 img{
		       	width:64px;
		       	height:64px;
		       	background:#f3bd98;
		       	float:right;
		       }
		    .bo1 h2 span{
		    	display:inline-block;
		    	margin-top:52px;
		    	margin-left: 47px;
            } 
		    .bo1 h2 a:hover{
		    	border-bottom:4px solid #e8592a;
		    	color:#333333;
		    }
		    .bo1 h2 span a{
		    	color:#bbbbbb;
		    }
		    .bo1 h2 div{
		    	position: absolute;
		    }
		    .box2 .bo1 .input1,.password,button{
		    display:block;
		    width:357px;
		    height:64px;
		    border:none;
		    margin-left: 47px;
		    }
		    .box2 .bo1 .input1{
		    	background:#f9f9f9;
		    	margin-top: 29px;
		    	color:#959595;
		    }
		    .box2 .bo1 .password{
		    	background:#f9f9f9;
		    	margin-top: 20px;
		    	color:#959595;
		    }
		     .box2 .bo1 button{
		    	background:#f2ba9b;
		    	margin-top: 20px;
		    	text-align: center;
		    	font-size: 16px;
		    	color:#fefcfa;
				border-radius: 10px;
		    }
			.box2 .bo1 p{
				display:block;
				width:357px;
				margin-left: 47px;
				color:#959595;				
			}
		    .box2 .bo1 a{
		    	display: inline-block;		
		    }
		    .box2 .bo1 .a-left{
		    	margin-left: 47px;
		    	margin-top:16px;
		    	color:#eb7e47;
		    }
		    .box2 .bo1 .a-right{
		    	float:right;
		    	margin:16px 47px;
		    	color:#eb7e47;
		    }
		    .box2 .bo1 .bo1-bottom{
		    	width:258px;
		    	height:120px;
		    	background:#ffffff;
		    	margin:73px 0 0 98px;}
		    	 .box2 .bo1 .bo1-bottom p{
		    	 	text-align:center;
		    	 	color:#bbbbbb;
		    	 }
		    	 .box2 .bo1 .bo1-bottom ul{
		    	 	margin-top:21px;
		    	 }
		    	 .box2 .bo1 .bo1-bottom ul li{
		    	 	list-style:none;
		    	 	float:left;
		    	 }
		    	 .box2 .bo1 .bo1-bottom ul .li-2,.li-3{
		    	 	margin-left:24px;
		    	 }
		    	 .box2 .bo1 .bo1-bottom ul .li-4{
		    	 	float:right;
		    	 }
		</style> 
		<script src="jquery/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
		<script src="common.js"></script>
		<script src="login.js"></script>
	</head>
	<body>
	     <div class="main">
	            <div class="box1">
	            <img src="image/xiaomi_02.jpg"  />
	            </div>
	            <div class="box2">
	                   <div class="bo1">
	                      <h2>
	                      	<div></div>
	                      	<span><a href="">登陆</a></span>
	                      	<img src="images/xiaomizhuce04.gif"  />
	                      </h2>
	                      <input type="text"class="input1" placeholder="手机号码"/>
	                      <input type="text"class="password" placeholder="密码"/>
						  <p><input type="checkbox" class="checkbox" >保存登录信息</p>
	                      <button class="button">登录</button>
	                     <a href="" class="a-left">忘记密码？</a><a href="regist.html"  class="a-right">手机号登陆</a> 
	                     <div class="bo1-bottom">
	                     	<p>其他方式登陆</p>
	                     	<ul>
	                     		<li class="li-1"><a href=""><img src="image/xiaomizhuce01_03.jpg" alt="" /></a></li>
	                     		<li class="li-2"><a href=""><img src="image/xiaomizhuce02_03.jpg" alt="" /></a></li>
	                     		<li class="li-3"><a href=""><img src="image/xiaomizhuce03_03.jpg" alt="" /></a></li>
	                     		<li class="li-4"><a href=""><img src="image/xiaomizhuce04_03.jpg" alt="" /></a></li>
	                     	</ul>
	                     </div>
	                   </div>
	            </div>
	     </div>
	</body>
</html>